<template>
  <div>
    <el-form labelWidth="120px" :disabled="status==1">
      <!-- {{reimarr}} -->
      <el-form-item label="报销种类" style="margin-bottom:5px;width:100%" class="is-required">
        <el-row
          style="border:1px solid #f1f1f1;padding:10px;"
          v-for="(item, index) in reimarr"
          :key="index"
        >
          <el-col :span="21">
            <el-select
              style="width:33.3%"
              v-model="item.mounttype"
              placeholder="请选择报销种类"
              @change="getsecondearr($event,index)"
            >
              <el-option
                v-for="item in firstarr"
                :key="item.value"
                :label="item.hash.code_name"
                :value="item.hash.code_id"
              ></el-option>
            </el-select>
            <el-select
              style="width:33.3%"
              v-model="item.childmounttype"
              placeholder="请选择报销子类"
              :disabled="item.mounttype==''"
            >
              <el-option
                v-for="item in item.secondarr"
                :key="item.value"
                :label="item.hash.code_name"
                :value="item.hash.code_id"
              ></el-option>
            </el-select>
            <!--
            <el-cascader
              v-model="item.mounttype"
              :options="options2"
              @active-item-change="handleItemChange"
              @change="qwert($event,index)"
              :props="props"
              style="width:100%"
            ></el-cascader>-->

            <el-input v-model="item.amount" style="width:33.3%" placeholder="请输入报销金额" clearable></el-input>

            <selectorg @getselectorgid="getselectorgid($event,index)" :editorgid="item.branchid"></selectorg>
          </el-col>
          <el-col :span="3" v-if="status!=1">
            <i class="el-icon-delete deleteicon" @click="deletereim(index)"></i>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item style="width:100%;">
        <p style="line-height:30px;height:30px">
          <el-button icon="el-icon-plus" style="width:100%;" @click="addreim">添加报销种类</el-button>
        </p>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import selectorg from '~/components/common/selectorg.vue';

export default {
  data() {
    return {
      ts: this.newStore(),
      firstarr: [],
      secondarr: [],
      options2: [],
      b: '',
      secondname: '',
      firstname: '',
      bb: [],
      secone: '',
      sectwo: '',
      m: '',
      props: {
        value: 'value',
        children: 'childs',
      },
      reimData: {},
      // mounttyper: [],
      reimarr: [
        {
          mounttype: '',
          childmounttype: '',
          secondarr: [],
          branchid: '',
          amount: '',
          // reimlen: '',
        },
      ],
    };
  },
  components: {
    selectorg,
  },
  props: {
    lastreimarr: Array,
    status: Number,
  },
  watch: {
    reimarr: {
      handler(newValue) {
        this.$emit('update:lastreimarr', newValue);
      },
      deep: true,
    },
  },
  created() {
    this.getitem();

    if (this.status != 0) {
      this.reimarr = this.lastreimarr;
      for (let i = 0; i < this.lastreimarr.length; i++) {
        const req = {
          handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
          supid: this.lastreimarr[i].mounttype,
          codetype: '05',
        };
        this.spost(this.ts, '/mainservlet', req).then((ts) => {
          this.reimarr[i].secondarr = ts.d.data.operation1;
          setTimeout(() => {
            const a = this.reimarr[i].childmounttype;
            this.reimarr[i].childmounttype = '';
            this.reimarr[i].childmounttype = a;
          }, 100);
        });
      }
    }
  },

  methods: {
    // 获取请款类型
    getitem() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '0505',
        codetype: '05',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.firstarr = ts.d.data.operation1;
      });
    },
    getsecondearr(val, index) {
      this.reimarr[index].childmounttype = '';
      this.reimarr[index].secondarr = [];
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: val,
        codetype: '05',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.reimarr[index].secondarr = ts.d.data.operation1;
      });
    },
    // 添加报销种类
    addreim() {
      const a = {
        mounttype: '',
        childmounttype: '',
        secondarr: [],
        branchid: '',
        amount: '',

      };
      this.reimarr.push(a);
    },

    deletereim(index) {
      this.reimarr.splice(index, 1);
    },

    // 获取部门
    getselectorgid(val, index) {
      this.reimarr[index].branchid = val;
    },
  },
};
</script>
<style scoped>
.deleteicon {
  display: inline-block;
  width: 100%;
  height: 78px;
  /* background: red; */
  font-size: 20px;
  /* margin: 0 auto; */
  text-align: center;
  line-height: 77px;
  color: #aaa;
  cursor: pointer;
}
</style>
